import axios from "../../utils/Index";
import "./Z.css";
import React, { useEffect, useState } from "react";
import { AppsO, Bars, Clear } from "@react-vant/icons";
import "animate.css";

export default function She() {
  let [devdata, setDevdata] = useState([]);
  let [qie, setQie] = useState(null);
  let [hid, setHid] = useState("");

  const diffShow = (i) => {
    if (i == "heng") {
      setQie("heng");
    } else if (i == "shu") {
      setQie("shu");
    } else if (i == "del") {
      setQie(null);
    }
  };
  const getdata = async () => {
    let { data } = await axios.get("/getDevice");
    setDevdata(data.data);
  };
  useEffect(() => {
    getdata();
  }, []);
  return (
    <div className="animate__animated animate__fadeInDown">
      <div id="dev-head">
        <p>设备</p>
        <div>
          <div>
            {qie == "heng" ? (
              <Clear
                style={{
                  fontSize: "clamp(0.1rem,7vw,10rem)",
                  position: "absolute",
                  right: "13%",
                  top: "20%",
                }}
                onClick={() => diffShow("del")}
              />
            ) : (
              <AppsO
                style={{
                  fontSize: "clamp(0.1rem,7vw,10rem)",
                  position: "absolute",
                  right: "13%",
                  top: "20%",
                }}
                onClick={() => diffShow("heng")}
              />
            )}
          </div>
          <div>
            {qie == "shu" ? (
              <Clear
                style={{
                  fontSize: "clamp(0.1rem,7vw,10rem)",
                  position: "absolute",
                  right: "5%",
                  top: "20%",
                }}
                onClick={() => diffShow("del")}
              />
            ) : (
              <Bars
                style={{
                  fontSize: "clamp(0.1rem,7vw,10rem)",
                  position: "absolute",
                  right: "5%",
                  top: "20%",
                }}
                onClick={() => diffShow("shu")}
              />
            )}
          </div>
        </div>
      </div>
      <div>
        {qie == "heng" || qie === null ? (
          <div className="dev-body">
            {devdata.map((el) => (
              <div
                key={el._id}
                className="body-div"
                onMouseEnter={() => {
                  setHid(el._id);
                }}
                onMouseLeave={() => {
                  setHid("");
                }}
                id={hid == el._id ? "yin" : ""}
              >
                <img
                  src={"../" + el.devImg}
                  style={{
                    width: "50px",
                    height: "50px",
                    marginLeft: "60%",
                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
                    borderRadius: "10px",
                    marginTop: "5%",
                  }}
                />
                <br />
                <b style={{ marginLeft: "10%" }}>{el.devName}</b>
              </div>
            ))}
          </div>
        ) : (
          <div className="dec-body1">
            {devdata.map((el) => (
              <div
                key={el._id}
                className="body-div1"
                onMouseEnter={() => {
                  setHid(el._id);
                }}
                onMouseLeave={() => {
                  setHid("");
                }}
                id={hid == el._id ? "yin" : ""}
              >
                <img
                  src={"../" + el.devImg}
                  style={{
                    width: "50px",
                    height: "50px",
                    marginLeft: "5%",
                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
                    borderRadius: "10px",
                  }}
                />
                <b style={{ marginLeft: "10%" }}>{el.devName}</b>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
